<template>
  <div class="change_data">

    <van-field :type="class_type" :disabled="is_disabled" rows="3" autocomplete="off" v-model="value" name="phone" :label="txt_tip" :placeholder="`请填写${txt_tip}`"
      @input="getValue" :rules="rule">
     <template v-if="is_require" #right-icon>
       <span style="color:red;font-size:20px">*</span>
     </template> 
    </van-field>
  </div>
</template>

<script>
  export default {
    model: {
      prop: 'item_value',
      event: 'change',
    },
    props: {
      is_disabled:{
        type: Boolean,
        default: false
      },
      is_require:{
        type: Boolean,
        default: true
      },
      item_value: {
        type: String,
        default: '',
      },
      txt_tip: {
        type: String,
        default: '',
      },
      to_rule: {
        type: Array,
        default: () => []
      },
      class_type: {
        type: String,
        default: 'text'
      }
    },
    mounted() {
      this.value = this.item_value
      this.rule = this.is_require ? this.$options.data().rule : [];

      this.rule = [...this.rule, ...this.to_rule];
    },

    watch: {
      item_value(val) {
        console.log(val);
        this.value = val
      }
    },
    methods: {

      getValue(val) {
        console.log(val);
        this.$emit('change', val);
        this.value = val;
      }
    },
    name: 'NewItem',
    data() {
      return {
        value: '',
        rule: [{
          required: true,
          message: `信息必填`
        }],
      };
    },
  }
</script>

<style lang="less" scoped>
  /deep/.van-field {
    align-items: center;
  }

  /deep/.van-field__label {
    height: 100%;
    line-height: 100%;
  }

  /deep/.van-field__label span {
    display: inline-block;
    height: 100%;
    line-height: 100%;
  }

  .change_data {
    font-size: 28px;
    margin-top: 25px;
    margin-right: 25px;
    line-height: 100px;
    border-radius: 16px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;

    .icon_size {
      width: 26px;
      height: 26px;
      margin-right: 12px;
    }
  }
</style>